<template>
  <div class="hot-wrapper">
    <div v-if="hots.length">
      <h1 class="title">热门搜索</h1>
      <ul class="hot-list">
        <li class="item"
            v-for="item in hots"
            :key="item.first"
            v-text="item.first"
            @click="$emit('select', item.first)"
        />
      </ul>
    </div>
  </div>
</template>

<script>
import { SearchHotAsync } from 'api/search'

export default {
  name: 'hot-key',
  data () {
    return {
      hots: []
    }
  },
  created () {
    this.SearchHotAsync()
  },
  methods: {
    SearchHotAsync () {
      SearchHotAsync().then(hots => {
        this.hots = hots
        this.$emit('refreshScroll')
      }).catch(() => {})
    }
  }
}
</script>

<style scoped lang="less">
  @import "~common/style/variable.less";

  .hot-wrapper {
    .title {
      margin: 7px 12px;
      font-size: @font-size-large-x;
      color: @color-text;
      text-align: left;
    }
    .hot-list {
      display: flex;
      flex-wrap: wrap;
      .item {
        margin: 7px 12px;
        padding: 7px 12px;
        border-radius: 7px;
        background: @color-background-d;
        color: @color-text-d;
      }
    }
  }

</style>
